<template>
  <div>
    <Card class="search-condition">
      <Row>
        <span>
          排名规则名称：
        </span>
        <Input v-model="pageModel.ruleName" placeholder="请输入" clearable style="width:200px"></Input>
        <span>
          排名规则年度：
        </span>
        <DatePicker type="year" v-model="pageModel.niandu" placeholder="请选择" clearable style="width:200px"></DatePicker>
        <span>
          赛事类型：
        </span>
        <dict code="ZGX_SSDJ" model="pageModel.kindCode" :value="pageModel.kindCode" @click="getVal"></dict>
        <Button @click="fetchListStart" type="primary" class="m-l-sm" icon="md-search">筛选</Button>
        <Button @click="reset" class="m-l-sm" icon="md-sync">重置</Button>
      </Row>
    </Card>
    <Row class="m-t-sm m-b-sm">
      <Button type="primary" @click="editModal()" icon="md-add">新增</Button>
    </Row>
    <Card>
      <Row>
        <Table :loading="loading" :columns="tableColumn" stripe border :data="tableData"></Table>
        <page-temp :total="total" :current="page.pageNo" :size="page.pageSize" @changePage="changePage"></page-temp>
        <Modal v-model="visible" width='800' :closable='false' :mask-closable='false' title="编辑">
          <Card>
            <Row>
              <Col span="17" offset="3">
              <Form ref='obj' :model="obj" :rules="ruleInline" inline :label-width='100'>
                <FormItem prop='ruleName' label="计算规则名称" style="width:100%;">
                  <Input v-model="obj.ruleName" clearable placeholder="请输入"></Input>
                </FormItem>
                <FormItem prop='niandu' label="年度" style="width:100%;">
                  <DatePicker type="year" v-model="obj.niandu" clearable placeholder="请选择" style="width:100%;"></DatePicker>
                </FormItem>
                <FormItem prop='kindCode' label="赛事类型" style="width:100%;">
                  <dict code="ZGX_SSDJ" model="obj.kindCode" :value="obj.kindCode" @click="getVal" style="width:100%;"></dict>
                </FormItem>
              </Form>
              </Col>
            </Row>
          </Card>
          <div slot="footer">
            <Button @click="cancel">取消</Button>
            <Button @click="save" class="m-l-md" type="primary">确认</Button>
          </div>
        </Modal>
      </Row>
    </Card>
  </div>
</template>
<script>
import dict from '_c/dict/dict.vue';
import dictSpan from '_c/dict/dict-span.vue';
import Api from '@/api/ranking-rules';
import _ from 'lodash';
const api = new Api();
export default {
  components: {
    dict,
    dictSpan
  },
  data() {
    return {
      loading: true,
      visible: false,
      total: 0,
      page: {
        pageNo: 1,
        pageSize: this.$config.PAGE_SIZE
      },
      obj: {},
      ruleInline: {
        ruleName: [
          { required: true, message: '请输入' },
          {
            max: this.$config.INPUT_SIZE,
            message: `最多输入${this.$config.INPUT_SIZE}个字符`
          }
        ],
        niandu: [
          {
            required: true,
            message: '请选择'
          }
        ],
        kindCode: [
          {
            required: true,
            message: '请选择'
          }
        ]
      },
      pageModel: {},
      tableColumn: [
        {
          title: '规则年度',
          key: 'niandu'
        },
        {
          title: '规则名称',
          key: 'ruleName'
        },
        {
          title: '赛事类型',
          key: 'kindCode',
          render: (h, params) => {
            return h(dictSpan, {
              props: {
                code: 'ZGX_SSDJ',
                value: params.row.kindCode
              }
            });
          }
        },
        {
          title: '操作',
          render: (h, params) => {
            let statusStr = params.row.status === '1' ? '停用' : '启用';
            let self = this;
            return h('div', [
              h(
                'Button',
                {
                  style: {
                    marginRight: '5px'
                  },
                  props: { type: 'primary', size: 'small' },
                  on: {
                    click: () => {
                      self.editModal(self.tableData[params.index]);
                    }
                  }
                },
                '编辑'
              ),
              h(
                'Poptip',
                {
                  props: {
                    confirm: true,
                    title: `您确定要${statusStr}这条规则吗?`,
                    transfer: true,
                    placement: 'top'
                  },
                  on: {
                    'on-ok': () => {
                      self.updateStatus(params.row.ruleId, params.row.status);
                    }
                  }
                },
                [
                  h(
                    'Button',
                    {
                      style: {
                        marginRight: '5px'
                      },
                      props: {
                        type: params.row.status === '1' ? 'error' : 'primary',
                        size: 'small'
                      }
                    },
                    params.row.status === '1' ? '停用' : '启用'
                  )
                ]
              ),
              h(
                'Poptip',
                {
                  props: {
                    confirm: true,
                    title: '您确定要删除这条数据吗?',
                    transfer: true
                  },
                  on: {
                    'on-ok': () => {
                      self.del(params.row.ruleId);
                    }
                  }
                },
                [
                  h(
                    'Button',
                    {
                      style: {
                        marginRight: '5px'
                      },
                      props: { type: 'error', size: 'small' }
                    },
                    '删除'
                  )
                ]
              ),
              h(
                'Button',
                {
                  props: { type: 'primary', size: 'small' },
                  on: {
                    click() {
                      self.$router.push('config/' + params.row.ruleId);
                    }
                  }
                },
                '查看详情'
              )
            ]);
          }
        }
      ],
      tableData: []
    };
  },
  mounted() {
    this.fetchListStart();
  },
  methods: {
    getVal(expression) {
      let self = this;
      eval(expression);
    },
    fetchListStart() {
      let self = this;
      self.page = { ...self.page, ...self.pageModel, pageNo: 1 };
      if (self.page.niandu) {
        self.page.niandu = self.$moment(self.page.niandu).format('YYYY');
      }
      self.fetchList();
    },
    fetchList() {
      let self = this;
      self.loading = true;
      api
        .queryList(self.page)
        .then(data => {
          self.total = data.count || 0;
          self.tableData = data.list || [];
          self.loading = false;
        })
        .catch(error => {
          self.loading = false;
        });
    },
    reset() {
      let self = this;
      Object.keys(self.pageModel).forEach(x => {
        self.pageModel[x] = null;
      });
      self.fetchListStart();
    },
    changePage(pageNum) {
      this.page.pageNo = pageNum;
      this.fetchList();
    },
    del(id) {
      let self = this;
      self.loading = true;
      api
        .del(id)
        .then(data => {
          self.fetchListStart();
        })
        .catch(error => {
          self.loading = false;
        });
    },
    editModal(row) {
      this.visible = true;
      if (row != null) {
        this.obj = { ...row };
      }
    },
    save() {
      let self = this;
      self.$refs['obj'].validate(valid => {
        if (valid) {
          self.loading = true;
          self.obj.niandu = self.$moment(self.obj.niandu).format('YYYY');
          let obj = _.omit(self.obj, ['_index', '_rowKey']);
          api
            .edit(self.obj)
            .then(data => {
              self.visible = false;
              self.fetchListStart();
            })
            .catch(() => {
              self.loading = false;
            });
        }
      });
    },
    cancel() {
      this.loading = false;
      this.visible = false;
      this.obj = { kindCode: null, niandu: null, ruleName: null };
      this.$refs['obj'].resetFields();
    },
    // 启用/停用 任务
    updateStatus(id, status) {
      let self = this;
      self.loading = true;
      api
        .updateStatus({ id, status })
        .then(data => {
          self.fetchListStart();
        })
        .catch(error => {
          self.loading = false;
        });
    }
  }
};
</script>

